<script setup>
// 无需额外逻辑
</script>

<template>
  <div class="quickstart-container">
    <h2>快速入门指南</h2>
    
    <div class="step">
      <div class="step-number">1</div>
      <div class="step-content">
        <h3>克隆项目代码</h3>
        <div class="code-block">git clone [项目地址]</div>
        <p>或者下载项目ZIP包并解压</p>
      </div>
    </div>
    
    <div class="step">
      <div class="step-number">2</div>
      <div class="step-content">
        <h3>安装项目依赖</h3>
        <div class="code-block">cd vue-test
npm install</div>
        <p>这将安装package.json中定义的所有依赖包</p>
      </div>
    </div>
    
    <div class="step">
      <div class="step-number">3</div>
      <div class="step-content">
        <h3>启动开发服务器</h3>
        <div class="code-block">npm run dev</div>
        <p>启动后，浏览器会自动打开 http://localhost:5173/</p>
      </div>
    </div>
    
    <div class="step">
      <div class="step-number">4</div>
      <div class="step-content">
        <h3>探索项目</h3>
        <p>项目包含三个主要部分：</p>
        <ul>
          <li>待办事项应用 - 展示基本的列表处理功能</li>
          <li>计数器 - 展示基本的响应式数据处理</li>
          <li>文档 - 详细的Vue使用指南</li>
        </ul>
      </div>
    </div>
    
    <div class="step">
      <div class="step-number">5</div>
      <div class="step-content">
        <h3>修改代码</h3>
        <p>推荐学习路径：</p>
        <ol>
          <li>查看 <code>src/components/</code> 目录中的组件</li>
          <li>尝试修改它们或创建自己的组件</li>
          <li>参考文档页面学习Vue的基本概念</li>
        </ol>
      </div>
    </div>
    
    <div class="tip-container">
      <h3>提示</h3>
      <ul class="tips">
        <li>代码更改会自动热重载，无需手动刷新</li>
        <li>查看控制台可以获取运行时错误信息</li>
        <li>使用Vue DevTools可以更好地调试组件</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.quickstart-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

h2 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
}

.step {
  display: flex;
  margin-bottom: 30px;
  align-items: flex-start;
}

.step-number {
  background-color: #42b983;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content h3 {
  margin-top: 0;
  color: #42b983;
}

.code-block {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  margin: 10px 0;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre;
  overflow-x: auto;
}

.tip-container {
  background-color: #fffde7;
  padding: 20px;
  border-radius: 6px;
  border-left: 4px solid #ffca28;
  margin-top: 20px;
}

.tip-container h3 {
  margin-top: 0;
  color: #f57c00;
}

.tips li {
  margin-bottom: 8px;
}

ul, ol {
  padding-left: 20px;
}

li {
  margin-bottom: 5px;
}

code {
  background-color: #f0f0f0;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: monospace;
}
</style> 